<template>
  <el-container class="about-layout" style="background: #f5f5f5;">
    <el-header style="text-align: right; font-size: 12px;">
      <el-button type="info" @click="onCreateMetadata" icon="el-icon-plus">创建配置文件</el-button>
    </el-header>
    <el-main>
      <el-table :data="namespaces"
              border
              style="width: 100%">
         <el-table-column
                fixed
                prop="namespaceId"
                label="空间ID">
        </el-table-column>
        <el-table-column
                fixed
                prop="namespace"
                label="空间名称">
        </el-table-column>
        <el-table-column
                prop="profile"
                label="环境">
        </el-table-column>
        <el-table-column
                prop="type"
                label="类型">
        </el-table-column>
         <el-table-column
                prop="createTime"
                label="时间">
        </el-table-column>
        <el-table-column
                label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="onEditClick(scope.row)">编辑</el-button>
            <el-button type="text" size="small">灰度</el-button>
            <el-button type="text" size="small">历史</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
<style scoped>
  .about-layout > .el-header{
    background-color: #FFFFFF;
  }
  .el-main > .el-row{
    margin: 10px 0;
  }
  .json-editor{
  height: 100%;
  position: relative;
}
.json-editor >>> .CodeMirror {
  height: auto;
  min-height: 300px;
}
.json-editor >>> .CodeMirror-scroll{
  min-height: 300px;
}
.json-editor >>> .cm-s-rubyblue span.cm-string {
  color: #F08047;
}
</style>
<script>
  export default {
    created(){
      this.$store.dispatch('metadata/all').then((response)=>{
        this.namespaces = response
        console.log(this.namespaces)
      }).catch((error)=>{
        console.log(error)
      })

      this.$store.dispatch('namespace/all').then((response)=>{
        console.log(response)
      }).catch((error)=>{
        console.log(error)
      })

      
    },
    methods: {
      onCodeChange(newCode) {
        this.form.context = newCode
      },
      onTypeChange(item){
        if(item === 'yml'){
          console.log("yml")
          this.cmOptions.mode = "text/x-yaml";
          this.PROPERTIES = this.form.context;
          this.form.context = this.YML;
        }else{
          console.log("properties")
          this.cmOptions.mode = "text/x-properties";
          this.YML = this.form.context;
          this.form.context = this.PROPERTIES;
        }
      },
      onSaveMetadata(){
          this.$store.dispatch('metadata/save', this.form).then(() => {
            // this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
          }).catch(() => {
           
          })
        this.dialogFormVisible = false;
      },
      onCreateMetadata(){
        this.$router.push({name:'metadata_edit'})
      },
      onEditClick(metadata){
        this.$router.push({name:'metadata_edit_id', params:{id:metadata.id}})
      }
    },
    data(){
      return {
        namespaces:[],
        checkAll: false,
        isIndeterminate: false,
        profiles:[],
        form: {
          id: 0,
          context: '',
          profiles: [],
          type: 'yml'
        },
        formLabelWidth: '120px',
      };
    }
  }
</script>